<template>
	<view class="login-box">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="login-main">
	<!-- 		<view class="login-main-title"><image class="login-main-title-image" src="../../static/img/right-icon.png" mode=""></image></view> -->
			<view class="login-title">
				<view class="login-title-top"><text>登录注册</text></view>
				<view class="login-title-bottom"><text>未注册的手机号验证后自动注册成功</text></view>
			</view>
			<view class="u-page login-phone">	
				<!-- 应用uview的iuput插件显示下划线 -->
				<view class="u-demo-block login-phone-top">
					<text class="u-demo-block__title login-phone-sizes">手机号</text>
					<view class="login-phone-numb">
						<input class="login-phone-numb-input" v-model="message" type="number" placeholder="请输入手机号" placeholder-style="color:#5E6272;"  />
						<view class="login-phone-numb-close" @click="qingkong()" v-if="isClose">
							<u-icon class="iconn" name="close" color="#5E6272" size="100%"></u-icon>
						</view>
					</view>
				</view>
				<view class="login-phone-bont">
					<text class="login-phone-sizes">验证码</text>
					<view class="login-phone-passwd">
						<input class="login-phone-passwd-iput" type="text" v-model="code" placeholder="请输入验证码" placeholder-style="color:#5E6272;" />
						<view class="login-phone-passwd-btn" @click="getCode">
							<text>{{codeBtnText}}</text>
						</view>
					</view>
				</view>
				<view class="login-choice">
					<template>
					    <view class="login-choice-box" @click="agreementFlag = !agreementFlag">
							<view class="login-choice-check">
								<image class="_check-img" v-if="!agreementFlag" src="../../static/img/check.png" mode=""></image>
								<image class="_check-img" v-else src="../../static/img/check-on.png" mode=""></image>
							</view> 
							<view class="login-choice-agreed">
								我已阅读并同意
								<text class="login-choice-agreed_1" @click.stop="toLink('/pages/agreement/userDoc')">《用户协议》</text>
								和
								<text class="login-choice-agreed_1" @click.stop="toLink('/pages/agreement/privacyDoc')">《隐私声明》</text>
							</view>
					    </view>
					</template>
				</view>
			</view>
			<view class="login-dibu" :class="loginDibuFlag?'login-dibu-on':''" @click="loginConfirm">
				<text>登录</text>
			</view>	
		</view>
	</view>
</template>

<script>
  export default {
    data() {
		return {
			pageTitle:'登录',
			tips: '',
			value: '',
			message:'',
			isClose:false,
			code:'',
			codeBtnText:'获取验证码',
			codeBtnTimer:null,
			codeBtnFlag:true,
			loginBtnFlag:true,
			redirectUrl:'',
			agreementFlag:false,
			loginDibuFlag:false,
			invitedId:'',
		}
    },
	onLoad(option){
		if (option.redirectUrl) {
			this.redirectUrl = option.redirectUrl;
		}
		uni.setStorageSync('loginPage',1)
	},
	onShow() {
		if (uni.getStorageSync('invitedId')) {
			this.invitedId = uni.getStorageSync('invitedId');
		}
	},
	methods:{
		qingkong(){
			this.message='';
		},
		getCode() {
			if (!this.phoneReg.test(this.message)) {
				uni.showToast({
					title:'请输入正确的手机号',
					icon:'none'
				})
				return false
			}
			if (!this.codeBtnFlag) return false;
			this.codeBtnFlag = false;
			this.$api.getSend({mobile:this.message}).then(res => {
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title:'验证码发送成功',
						icon:'none'
					})
					let num = 60;
					this.codeBtnText = num+'s';
					this.codeBtnTimer = setInterval(() => {
						num--;
						if (num>0) {
							this.codeBtnText = num+'s';
						} else {
							this.codeBtnText = '获取验证码';
							clearInterval(this.codeBtnTimer)
							this.codeBtnFlag = true;
						}
					},1000)
				} else {
					this.codeBtnFlag = true;
				}
			})
		},
		loginConfirm() {
			if (!this.loginBtnFlag) return false
			if (!this.message) {
				uni.showToast({
					title:'手机号不能为空',
					icon:'none'
				})
				return false
			}
			if (!this.code) {
				uni.showToast({
					title:'验证码不能为空',
					icon:'none'
				})
				return false
			}
			if (!this.agreementFlag) {
				uni.showToast({
					title:'请勾选同意用户协议与隐私声明',
					icon:'none'
				})
				return false
			}
			this.loginBtnFlag  = false;
			this.$api.getLogin({
				code:this.code,
				mobile:this.message,
				invitedId:this.invitedId
			}).then(res => {
				// console.log(res)
				this.loginBtnFlag  = true;
				if (res.code == 200) {
					uni.setStorageSync('token',res.data.token)
					uni.showToast({
						title:'登录成功',
						icon:'none'
					})
					this.getUserInfo()
				}
			})
		},
		getUserInfo() {
			this.$api.getUserInfo().then(res => {
				console.log(res)
				if (res.code == 200) {
					uni.setStorageSync('userInfo',res.data)
					if (this.redirectUrl) {
						uni.redirectTo({
							url:this.redirectUrl
						})
					} else {
						uni.switchTab({
						    url: '/pages/myCenter/myCenter'
						});
					}
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			})
		},
		toLink(link) {
			uni.navigateTo({
				url:link
			})
		}
	},
	watch:{
		message: {
			handler:function(e) {
				// console.log(e)
				if (e != '') {
					this.isClose = true;
				} else {
					this.isClose = false;
				}
				if (e && this.code) {
					this.loginDibuFlag = true;
				} else {
					this.loginDibuFlag = false;
				}
			}
		},
		code: {
			handler:function(e) {
				// console.log(e)
				if (e && this.message) {
					this.loginDibuFlag = true;
				} else {
					this.loginDibuFlag = false;
				}
			}
		}
	}
  }
</script>

<style lang="less" scoped>
	.login-choice-box{
		display: flex;
		align-items: center;
		.login-choice-check{
			width: 32rpx;
			height: 34rpx;
			min-width: 32rpx;
			margin-right: 12rpx;
			._check-img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.login-choice-agreed{
		font-size: 24rpx;
		color: #5E6272;
		line-height: 34rpx;
		.login-choice-agreed_1{
			color:#cccccc;
		}
	}
	.login-box{
		width:100%;
		min-height: 100vh;
		background-color: #16181D;
		display: flow-root;
		}
	.login-main{
		font:caption;
		padding:0 40rpx; 
		width: 100%;
		box-sizing: border-box;
		background-color: #16181D;
		color: #FFFFFF;
	}
		.login-main-title{
			width: 100%;			
			height: 96rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			display: flex;
			align-items: center;
				.login-main-title-image{
					width: 54rpx;
					height: 54rpx;
				}				
		}

		.login-title{
			margin-top: 68rpx;
			width: 100%;
			.login-title-top{
				font-size: 64rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				height: 80rpx;
				line-height: 80rpx;
				letter-spacing:2px;
			}
			.login-title-bottom{
				height: 48rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #5E6272;
				margin-top: 18rpx;
				margin:18rpx 0 82rpx;
			}	
		}

		.login-phone-top{
			height: 144rpx;
			width: 100%;
		}
		
		.login-phone-sizes{
			height: 32rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #5E6272;
			line-height: 32rpx;
			letter-spacing:2px;
		}
		.qu_chu{
			padding-left: 0 !important;
		}
		
		.login-phone-bont{
			width: 100%;
			height: 144rpx;
			margin-top: 50rpx;
			margin-bottom: 16rpx;
		}

		.login-phone-numb{
			font-size: 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom-width: 1px;
			border-color: #262A34;
			border-bottom-style: solid;
			.login-phone-numb-input{
				width: 220rpx;
				height: 48rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			.login-phone-numb-close{
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #262A34;
				line-height: 32rpx;	
				display: flex;
				.iconn{
					width: 100%;
					height: 100%;
				}
			}
		}
		.login-phone-numb:hover{
			border-color: #A5F59C;
		}
		.login-phone-numb:active{
			border-color: #A5F59C;
		}
		.login-phone-passwd{
			font-size: 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom-width: 1px;
			border-color: #262A34;
			border-bottom-style: solid;
			.login-phone-passwd-iput{
				width: 192rpx;
				height: 48rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			.login-phone-passwd-btn{
				width: 160rpx;
				height: 48rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}
		}
		.login-phone-passwd:hover{
			border-color: #A5F59C;
		}
		.login-phone-passwd:active{
			border-color: #A5F59C;
		}
		.login-dibu{
			margin-top: 46rpx;
			width: 100%;
			height: 90rpx;
			line-height:90rpx;
			text-align: center;
			font-size: 32rpx;
			letter-spacing: 2px;
			border-radius: 48rpx;
			overflow: hidden;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5), 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
			opacity: 0.4;
			transition: all 0.3s linear;
		}
		
		.login-dibu-on{
			opacity: 1;
		}
	
</style>
